<script setup>
import {Notification} from "@arco-design/web-vue";
import {IconDelete, IconEdit} from "@arco-design/web-vue/es/icon";
import {onMounted, ref} from 'vue'
import apiAll from "@/api/apiAll.js";
import {tab_ipList} from "@/utils/tableColumn.js";
import addDrawer from './add.vue'
import editDrawer from './edit.vue'
import logDrawer from './log.vue'

const columns = ref(tab_ipList);
const loading = ref(true)
const data = ref([])
const param = ref({
  page: 1,
  size: 10,
  total: 0
})
const addDrawerRef = ref()
const editDrawerRef = ref()
const logDrawerRef = ref()

const loadData = () => {
  loading.value = true
  apiAll.ipList.list(param.value).then(res => {
    data.value = res.data
    param.value.total = res.total
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}
const add = () => {
  addDrawerRef.value.show()
}
const edit = (port) => {
  editDrawerRef.value.show(port)
}
const del = (port) => {
  loading.value = true
  apiAll.ipList.del(port).then(res => {
    Notification.success(res.msg)
    loadData()
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}
const changePage = (number) => {
  param.value.page = number
  loadData()
}
const changePageSize = (size) => {
  param.value.size = size
  loadData()
}

const showLog = () => {
  logDrawerRef.value.show()
}

onMounted(() => {
  loadData()
})

</script>

<template>
  <div class="flex-column">
    <a-space>
      <a-button @click="add" type="primary">添加黑白名单</a-button>
      <a-button @click="showLog" type="outline">查看日志记录</a-button>
    </a-space>
    <a-divider/>
    <a-table :columns="columns" :data="data" :loading="loading" :pagination="false">
      <template #action="{ rowIndex, record }">
        <div class="flex-row">
          <a-button type="primary" size="mini" @click="edit(record.port)">
            <template #icon>
              <icon-edit/>
            </template>
            <template #default>编辑</template>
          </a-button>
          <a-popconfirm content="确认删除此数据？" @ok="del(record.port)">
            <a-button type="primary" size="mini" status="danger" style="margin-left: 10px">
              <template #icon>
                <icon-delete/>
              </template>
              <template #default>删除</template>
            </a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <a-pagination @change="changePage" @page-size-change="changePageSize" :total="param.total" show-total show-jumper
                  style="margin-top: 15px" show-page-size/>
    <addDrawer ref="addDrawerRef" @success="loadData"/>
    <editDrawer ref="editDrawerRef" @success="loadData"/>
    <logDrawer ref="logDrawerRef"/>
  </div>
</template>

<style scoped>

</style>